<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>糖尿病风险评估</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36BFFA',
                        accent: '#7B61FF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        'gray-light': '#F2F3F5',
                        'gray-medium': '#C9CDD4',
                        'gray-dark': '#86909C',
                    },
                    fontFamily: {
                        inter: ['Inter','sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
          .content-auto {
                content-visibility: auto;
            }
          .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
            }
          .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300;
            }
          .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #7B61FF 100%);
            }
          .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
                background-image: linear-gradient(135deg, #165DFF 0%, #7B61FF 100%);
            }
          .form-input-wrapper {
                @apply relative;
            }
          .form-icon {
                @apply absolute inset-y-0 left-0 flex items-center pl-3 text-gray-dark pointer-events-none;
            }
          .form-input {
                @apply w-full pl-10 pr-4 py-3 rounded-lg border border-gray-medium input-focus;
            }
          .form-select {
                @apply w-full pl-10 pr-10 py-3 rounded-lg border border-gray-medium input-focus appearance-none;
            }
          .select-arrow {
                @apply absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-dark;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-light min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-blue-600 text-white p-4 h-16">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold">糖尿病预测</h1>
            <ul class="flex space-x-4">
                <li><a href="{{ url_for('dashboard') }}" class="hover:text-gray-300">数据大屏</a></li>
                <li><a href="{{ url_for('home') }}" class="hover:text-gray-300">首页</a></li>
                <li><a href="{{ url_for('index') }}" class="hover:text-gray-300">预测</a></li>
                <li><a href="{{ url_for('user') }}" class="hover:text-gray-300">用户</a></li>
            </ul>
        </div>
    </nav>

    <!-- 页面主体内容 -->
    <main class="flex-grow container mx-auto px-4 py-8 md:py-12">
        <div class="max-w-4xl mx-auto">
            <!-- 页面标题 -->
            <div class="text-center mb-10">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-3">糖尿病风险预测</h2>
                <p class="text-gray-dark max-w-2xl mx-auto">
                    填写以下信息，我们将基于您的健康数据和家族病史评估您患糖尿病的风险。
                    此评估仅供参考，不能替代专业医疗建议。
                </p>
            </div>

            <!-- 表单卡片 -->
            <div class="bg-white rounded-2xl card-shadow p-6 md:p-8 mb-8 transition-all duration-300 hover:shadow-lg">
                <form action="{{ url_for('predict') }}" method="POST" class="space-y-6" oninput="calculateBMI()">
                    <!-- 用户标识 -->
                    <div class="bg-gray-light rounded-lg p-4">
                        <div class="flex items-center">
                            <i class="fa fa-id-card text-primary mr-3"></i>
                            <div>
                                <p class="text-sm text-gray-dark">用户身份证</p>
                                <input type="text" value="{{ idcard }}" title="这是您的身份证号" readonly
                                    class="bg-transparent border-none p-0 text-dark font-medium focus:outline-none w-full">
                            </div>
                        </div>
                    </div>

                    <!-- 健康数据部分 -->
                    <div class="space-y-6">
                        <h3 class="text-lg font-semibold text-dark flex items-center">
                            <span class="bg-primary/10 text-primary rounded-full w-6 h-6 flex items-center justify-center mr-2">
                                <i class="fa fa-stethoscope text-sm"></i>
                            </span>
                            个人健康数据
                        </h3>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- 性别选择 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-dark mb-2" for="gender">
                                    性别
                                </label>
                                <div class="form-input-wrapper">
                                    <span class="form-icon">
                                        <i class="fa fa-user"></i>
                                    </span>
                                    <select id="gender" name="gender" class="form-select">
                                        <option value="1">男</option>
                                        <option value="0">女</option>
                                        <option value="2">其他</option>
                                    </select>
                                    <span class="select-arrow">
                                        <i class="fa fa-chevron-down"></i>
                                    </span>
                                </div>
                            </div>

                            <!-- 年龄输入 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-dark mb-2" for="age">
                                    年龄 (岁)
                                </label>
                                <div class="form-input-wrapper">
                                    <span class="form-icon">
                                        <i class="fa fa-calendar"></i>
                                    </span>
                                    <input type="number" id="age" name="age" min="0" max="150" placeholder="34" required
                                        class="form-input" title="请输入0到150之间的整数">
                                </div>
                            </div>

                            <!-- 高血压 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-dark mb-2" for="hypertension">
                                    是否患有高血压
                                </label>
                                <div class="form-input-wrapper">
                                    <span class="form-icon">
                                        <i class="fa fa-heartbeat"></i>
                                    </span>
                                    <select id="hypertension" name="hypertension" class="form-select">
                                        <option value="0">否</option>
                                        <option value="1">是</option>
                                    </select>
                                    <span class="select-arrow">
                                        <i class="fa fa-chevron-down"></i>
                                    </span>
                                </div>
                            </div>

                            <!-- 心脏病 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-dark mb-2" for="heart_disease">
                                    是否患有心脏病
                                </label>
                                <div class="form-input-wrapper">
                                    <span class="form-icon">
                                        <i class="fa fa-heart"></i>
                                    </span>
                                    <select id="heart_disease" name="heart_disease" class="form-select">
                                        <option value="0">否</option>
                                        <option value="1">是</option>
                                    </select>
                                    <span class="select-arrow">
                                        <i class="fa fa-chevron-down"></i>
                                    </span>
                                </div>
                            </div>

                            <!-- 吸烟史 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-dark mb-2" for="smoking_history">
                                    吸烟史
                                </label>
                                <div class="form-input-wrapper">
                                    <span class="form-icon">
                                        <i class="fa-solid fa-smoking"></i>
                                    </span>
                                    <select id="smoking_history" name="smoking_history" class="form-select">
                                        <option value="0">从未吸烟</option>
                                        <option value="1">正在吸烟</option>
                                        <option value="-1">曾经吸烟但已停止</option>
                                        <option value="3">未知</option>
                                    </select>
                                    <span class="select-arrow">
                                        <i class="fa fa-chevron-down"></i>
                                    </span>
                                </div>
                            </div>

                            <!-- 新增身高输入 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-dark mb-2" for="height">
                                    身高 (cm)
                                </label>
                                <div class="form-input-wrapper">
                                    <span class="form-icon">
                                        <i class="fa fa-arrows-v"></i>
                                    </span>
                                    <input type="number" id="height" name="height" min="0" max="300" placeholder="175" required
                                        class="form-input" title="请输入0到300之间的整数">
                                </div>
                            </div>

                            <!-- 新增体重输入 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-dark mb-2" for="weight">
                                    体重 (kg)
                                </label>
                                <div class="form-input-wrapper">
                                    <span class="form-icon">
                                        <i class="fa fa-weight"></i>
                                    </span>
                                    <input type="number" id="weight" name="weight" min="0" max="500" placeholder="70" required
                                        class="form-input" title="请输入0到500之间的整数">
                                </div>
                            </div>

                            <!-- 隐藏的BMI字段 -->
                            <input type="hidden" id="bmi" name="bmi" required>

                            <!-- 隐藏的糖化血红蛋白水平字段 -->
                            <input type="hidden" id="HbA1c_level" name="HbA1c_level" required>

                            <!-- 血糖水平 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-dark mb-2" for="blood_glucose_level">
                                    血糖水平(mg/dl)
                                </label>
                                <div class="form-input-wrapper">
                                    <span class="form-icon">
                                        <i class="fa fa-tint"></i>
                                    </span>
                                    <input type="number" id="blood_glucose_level" name="blood_glucose_level" min="0" step="0.01" placeholder="90" required
                                        class="form-input" title="如果单位为mmol/l,则需要*18">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="pt-4">
                        <button type="submit"
                            class="w-full bg-gradient-primary text-white py-4 px-6 rounded-xl font-semibold text-lg shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transform hover:-translate-y-1 transition-all duration-300">
                            <i class="fa fa-heartbeat mr-2"></i>
                            开始风险评估
                        </button>
                    </div>
                </form>
            </div>

            <!-- 健康提示 -->
            <div class="bg-primary/5 rounded-2xl p-6 border border-primary/10">
                <h3 class="text-lg font-semibold text-primary mb-3 flex items-center">
                    <i class="fa fa-info-circle mr-2"></i>
                    健康提示
                </h3>
                <ul class="space-y-2 text-gray-dark">
                    <li class="flex items-start">
                        <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                        <span>定期体检是预防糖尿病的重要措施，建议每年进行一次全面体检。</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                        <span>保持健康的生活方式，均衡饮食、适量运动、戒烟限酒。</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fa fa-check-circle text-success mt-1 mr-2"></i>
                        <span>本评估结果仅供参考，不能替代医生的专业诊断。</span>
                    </li>
                </ul>
            </div>
        </div>
    </main>

    <!-- JavaScript -->
    <script>
        // 表单输入框焦点效果
        document.querySelectorAll('input, select').forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.classList.add('input-focused');
            });
            input.addEventListener('blur', function() {
                this.parentElement.classList.remove('input-focused');
            });
        });

        // BMI计算函数
        function calculateBMI() {
            const height = document.getElementById('height').value; // 身高（cm）
            const weight = document.getElementById('weight').value; // 体重（kg）
            const bmiInput = document.getElementById('bmi'); // 隐藏的BMI字段
            const bloodGlucoseLevel = document.getElementById('blood_glucose_level').value; // 血糖水平
            const HbA1cLevelInput = document.getElementById('HbA1c_level'); // 隐藏的糖化血红蛋白水平字段

            if (height && weight) { // 输入不为空时计算
                const bmi = (weight / ((height / 100) ** 2)).toFixed(2); // 保留两位小数
                bmiInput.value = bmi;
            } else {
                bmiInput.value = ''; // 清空字段
            }

            if (bloodGlucoseLevel) { // 输入不为空时计算糖化血红蛋白
                const HbA1cLevel = ((parseFloat(bloodGlucoseLevel) + 46.7) / 27.8).toFixed(2); // 保留两位小数
                HbA1cLevelInput.value = HbA1cLevel;
            } else {
                HbA1cLevelInput.value = ''; // 清空字段
            }
        }

        // 添加自定义的焦点样式
        const style = document.createElement('style');
        style.textContent = `
           .input-focused {
                transform: scale(1.01);
                transition: transform 0.3s ease;
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>